<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" media="screen" href="http://a.tbcdn.cn/app/dp/s/screen.css" />
<style>
#bd {margin-left:20px;margin-right:20px;}
</style>
<title>wd-gallery - markdown</title>
</head>
<body>
<div id="bd">
<p><style>
p img {
        float:none;
}
</style></p>

<h1>前言</h1>

<p>1995年随着Netsscape浏览器的发布，JavaScript也作为它的组成部分进入到公众的视野，之后JavaScript的发展道路尽管充满坎坷但成长飞速，如今得益于高性能的JIT（just in time）解析引擎，（在浏览器端）JavaScript已经无孔不入了。仅仅在5年以前，开发者还在使用Ajax写一些短小的代码或热衷于实现一些类似“黄色渐褪技术”的网页特效。现在，复杂的JavaScript应用已经可以写上成百上千行的代码了。</p>

<p>就在去年，互联网出现了一股追捧JavaScript应用的浪潮，很多人开始着迷于给Web应用加入很多桌面软件的交互元素，增强Web应用的用户体验，这种趋势犹如星星之火迅速蔓延至整个互联网。在过去，在浏览器性能不佳的条件下，用户使用Web应用时的每次交互都要刷新页面，而且页面加载很慢。而如今JavaScript引擎已经变得异常强大，我们可以将很多交互行为植入客户端，这样交互的响应就会非常及时，增强了体验。</p>

<p>当然获得提升的不仅仅是JavaScript引擎的性能。尽管CSS3和HTML5规范现在仍在修订之中，也已经有很多现代浏览器广泛支持这些新特性了，比如Safari，Chrome和Firefox，IE9也一定程度上支持这些新特性。利用这些特性可以花更少的时间做出更棒的视觉效果，而且不用花精力做图片的切割和拼合来模拟视觉效果了。现在浏览器的升级也很快，对HTML5和CSS3的支持也一天比一天好，但你还是要定义一个浏览器测试基准（你的应用所支持的最低标准的客户端软件和版本），基于此才能更加合理的选择所需的技术。</p>

<p>将应用的重心从服务器迁移到客户端并不轻松。这和构建服务器应用的方法完全不一样。你需要想清楚架构、模板、和服务器端的通信、框架等等。这些正是本书所涵盖的内容。我将手把手教你如何构建“优雅又不失高水准”的JavaScript应用。</p>

<h2>本书的目标读者</h2>

<p>本书不是为JavaScript初学者所写，如果你对JavaScript这门语言缺乏基本的了解和认识，我建议你先阅读一些更基础的书，比如Douglas Crockford编著的“JavaScript语言精萃”（O'Reilly）。本书更适合有一些JavaScript开发经验的开发者，比如使用jQuery类库的开发者，或者当你希望构建更复杂更高级的JavaScript应用时，本书也是适合你的。此外，本书的很多章节，特别是附录，对于有经验的JavaScript开发者来说也是非常有帮助的。</p>

<h2>本书的内容组织</h2>

<p><em>第1章</em></p>

<p>本章从JavaScript的发展历程开始，介绍了JavaScript的发展现状和对互联网的巨大影响。然后轻描淡写的介绍了MVC的基本概念，随后又讲解了JavaScript的构造函数、原型继承以及如何使用JavaScript创建一个“类”库。</p>

<p><em>第2章</em></p>

<p>第2章主要介绍了浏览器的事件机制，包括事件机制的发展历史，API设计和事件模型的行为和实现。然后讲解了如何基于jQuery绑定事件监听、使用代理、以及创建自定义事件。最后使用发布/订阅模式实现了“DOM无关”的事件。</p>

<p><em>第3章</em></p>

<p>第3章讲解了如何在你的应用中使用MVC模型，包括加载和操作远程数据。我们将会提到为什么在构建ORM类库的时候使用MVC和命名空间是如此之重要，以及如何使用ORM来管理模型数据。接下来讲解了如何使用JSONP和跨域Ajax来加载远程数据。最后介绍了如何使用HTML5本地存储和将本地存储提交至RESTful服务器，以及怎样实现模型数据的持久化。</p>

<p><em>第4章</em></p>

<p>本章演示了如何使用控制器模式在客户端保持一个状态。我们将讨论如何将逻辑封装成模块、阻止全局命名空间的污染，然后介绍如何使用视图来进一步简化控制器的结构，以及怎样在视图中实现DOM事件监听。本章的最后将会讨论路由选择，包括使用URL中的hash片段，使用新的HTML5 History API等技术，以及如何将两种技术结合起来。</p>

<p><em>第5章</em></p>

<p>这一章讲介绍了视图和JavaScript模板。给出了多种动态渲染视图的方式，以及很多模板类库和存储模板的方式（使用行内形式存储模板、使用script标签、以及异步加载）。接下来，你会接触到数据绑定的一些内容，包括如何链接模型和控制器以及如何从处理模型数据和视图数据的同步。</p>

<p><em>第6章</em></p>

<p>本章着重介绍了使用CommonJS模块系统来做JavaScript的依赖管理。开始会介绍CommonJS的发展历史、现状和展望。接下来会讲解如何在浏览器端使用CommonJS模块，包括介绍一些模块加载器类库，比如Yabble和RequireJS。然后我们讨论了如何动态的在服务器端包装模块，从而提高性能节省时间。本章的最后会介绍CommonJS的一些替代方案，比如Sprockets和LABjs。</p>

<p><em>第7章</em></p>

<p>这里将会讲到HTML5带给我们的一些好处：文件操作API。本章将会涵盖文件操作API的浏览器支持情况、多文件上传、拖拽上传文件以及使用剪切板事件。接下来会介绍使用二进制大文件和文件切割来读文件，同时将读取的结果在浏览器中输出。然后讲解使用XHR Level 2 规范来实现在后台上传文件，最后向大家展示一个使用jQuery Ajax API实现一个文件上传进度指示的例子。</p>

<p><em>第8章</em></p>

<p>这一章主要是关注使用WebSocket技术来构建实时应用。首先是介绍实时应用的发展历史以及各种实现技术的浏览器兼容性情况。然后更详细的介绍WebSocket和基于它的更高级的实现，包括浏览器兼容性和JavaScript API。接下来展示一个使用WebSocket实现的简单的RPC服务，看一下如何在客户端和服务器端之间建立连接。然后介绍Socket.IO和如何搭建实时架构，最后介绍用户体验方面的一些考量。</p>

<p><em>第9章</em></p>

<p>本章主要是测试和调试的内容，这些内容是JavaScript应用开发过程中的关键环节。我们的话题将围绕跨浏览器测试的主题进行展开，介绍浏览器基准的选择，单元测试和测试类库，比如QUnit和Jasmine。接下来介绍自动化测试和持续集成服务器比如Slenium。然后讲解调试相关的内容，介绍基于Webkit和Firefox的调试工具，以及如何使用JavaScript调试器。</p>

<p><em>第10章</em></p>

<p>本章介绍了另外一个非常重要却又极易被忽略的内容——JavaScript应用的部署。我们主要考虑的是性能方面，比如缓存、代码压缩、gzip压缩以及其他减少应用初始化加载时间的技术。最后讲解了如何使用CDN服务器来让我们的工作事半功倍，以及如何使用使用浏览器内置的策略来提升你的站点性能。</p>

<p><em>第11章</em></p>

<p>接下来的三章主要介绍了一些流行的JavaScript类库，这些类库常用来做JavaScript应用开发。Spine是一个轻量级的MVC类库，这个类库使用了本书中讲到的很多知识。本章将会为你介绍类库的核心部分：类、事件、模型和控制器。最后本章用一个例子来展示本章所讲到的知识点。</p>

<p><em>第12章</em></p>

<p>Backbone是一个非常流行的类库，使用这个类库可以非常高效的构建JavaScript应用，本章主要就是介绍这个类库。本章会涵盖Backbone的核心观念，比如模型、集合、视图等。接下来会介绍使用RESTful JSON请求从服务器获取模型数据，以及如何在服务器端响应这些请求。最后我们给出一个典型的例子来像大家展示如何使用这个类库。</p>

<p><em>第13章</em></p>

<p>本章主要介绍了JavaScriptMVC类库，这是一个流行的基于jQuery的框架，用来构建JavaScript应用。在这一章你将会学到JavaScriptMVC的一些基础知识，比如类、模型和控制器，同时还包含客户端的模板以及渲染视图。本章的最后会给出一个实际的CRUD列表的例子，给读者展示使用JavaScriptMVC创建抽象的、可重用的、节省内存的组件是多么的简单。</p>

<p><em>附录A</em></p>

<p>附录A中的内容主要是介绍jQuery，如果你想掌握jQuery的话，这部分内容对你会非常有帮助。本书中大部分示例代码都是基于jQuery的，因此首先熟悉jQuery是很重要的。这一部分会讲到大部分核心的API，比如DOM操作，DOM查询和遍历以及事件绑定、触发和事件代理。接下来会讲解jQuery的Ajax API，包括POST、GET、和JSON请求。随后将介绍jQuery的插件，如何使用jQuery来封装一个插件，让你的代码写的更具通用性。最后展示了一个实际的例子：创建一个jQuery插件。</p>

<p><em>附录B</em></p>

<p>附录B的内容主要是讲解Less，Less是CSS的超集，它使用变量、混合、操作符和优雅的规则来扩展了CSS本身的语法。利用这些规则可以极大的减少你所写的CSS代码量，特别是使用CSS3效果更佳。这部分包含Less的主要增强的语法，以及如何使用命令行工具和JavaScript类库来将Less文件编译成CSS。</p>

<p><em>附录C</em></p>

<p>这一部分主要讲解了CSS3。首先介绍了一点CSS3的背景知识、浏览器厂商的前缀，然后开始介绍CSS3的主要内容。这里介绍的CSS特性主要包括：圆角、rgba颜色、阴影、渐变、动画和变换。附录的最后讨论了使用Modernizr来实现的优雅降级，并展示了一实现了box-sizing规范的例子。</p>

<h2>本书的约定</h2>

<p>本书使用下列排版约定：</p>

<p><i>斜体</i><p>

<p>用于表示新术语、URL、电子邮件地址、文件扩展名和事件。</p>

<p>等宽字体</p>

<p>用来表示计算机代码片段，包括命令、数组、元素、语句、操作符、变量、属性、关键字、函数、类型、类、命名空间、方法、形参、实参、值、对象、事件处理程序、XML标签、宏指令、文件内容以及命令行的输出等等。</p>

<p><b>等宽加粗字体</b></p>

<p>用来表示命令或者其他用户输入的文本。</p>

<p>等宽斜体</p>

<p>用来表示可被替换的字符或文本，这些字符在合适的场景和特定的条件下会被替换成其他的值。</p>

<p>这个图标表示一种提示、建议或一般的消息提醒。</p>

<p>这个图标表示一种警告。</p>

<h2>附加文件</h2>

<p>本书的附加文件都存放在Github上（https://github.com/maccman/book-assets），可以直接在Github上查看，也可以下载。所有这些示例代码都以章节为单位存放，都已经包含了各自所需的类库，本书中用到的大多数示例代码同样在单独的文件中。</p>

<p>在本书中凡是有引用到这些附加文件的地方，都会以这种形式表述assets/chapter_number/name.</p>

<h2>代码约定</h2>

<p>本书中我们以assert()和assetEqual()函数来展示变量的值或者函数调用的结果。assert()是一种快捷表述方式，用来表示一个特定的变量。这在自动化测试中是一种非常常见的模式。assert()可以接收两个参数，一个值和一个可选的消息。如果运行结果不是真值，这个函数将抛出一个异常：</p>

<pre><code>var assert = function(value, msg) {
    if ( !value )
        throw(msg || (value + " does not equal true"));
};
</code></pre>

<p>assertEqual()是表示一个值是否等于另外一个值的另一种表述。它和assert()类似，但接收两个值。如果这两个值不相等，则这个断言失败：</p>

<pre><code>var assertEqual = function(val1, val2, msg) {
    if (val1 !== val2)
        throw(msg || (val1 + " does not equal " + val2));
};
</code></pre>

<p>这两个函数非常简单，正如你在示例代码中所看到的，如果断言失败，你会在浏览器的控制台中看到一个错误消息：</p>

<pre><code>ssert( true );

// 和assertEqual()等价
assert( false === false );

assertEqual( 1, 1 );
</code></pre>

<p>我们可以从代码中看出，对象比较会失败，除非两个对象是指向同一块内存的引用。解决办法是深比较，在这个例子中可以看到完整的代码assets/ch00/deep_equality.html.</p>

<h3>jQuery 示例代码</h3>

<p>本书的大部分示例代码都是基于jQuery的，jQuery是现在最流行的JavaScript类库，它对事件、DOM遍历、DOM操作和Ajax都做了封装，这里我选用jQuery是出于几个原因考虑的，最主要的原因是jQuery可以让代码变得非常简洁，而且当下大部分人对jQuery都非常熟悉，一看既懂。</p>

<p>如果你没有使用过jQuery，我强烈的推荐你首先看一下jQuery的文档。它的API非常不错，为DOM提供了一组非常棒的抽象的接口。可以在附录A中查阅到更多有关jQuery API的内容。</p>

<h2>Holla</h2>

<p>Holla是贯穿本书始终的一个小例子，它是一个JS实现的聊天应用。Holla是一个非常不错的例子，因为它和本书中大多书章节和内容都有交集。除了正文章节中对Holla的讲述之外，Holla为我们展示了：</p>

<ul>
<li>使用CSS3和HTML5来构建美观的界面</li>
<li>拖拽上传文件</li>
<li>使用Sprockets和Less来编写代码</li>
<li>使用WebSocket实现了服务器推将数据发送给客户端</li>
<li>创建了带有状态的JavaScript应用</li>
</ul>

<p>可以从Holla的Github的代码库中将代码拷贝下来，研读一下它的代码。本书中用到的很多例子都和Holla的源码有关，Holla的界面如图P-1。</p>

<p><img src="http://img04.taobaocdn.com/tps/i4/T1eLaxXdxcXXXXXXXX-746-509.png" alt="png" /></p>

<p>图P-1. Holla应用程序运行界面</p>

<h2>作者附言</h2>

<p>本书是我在环游世界的时候完成的，这花费了我一年的时间。这一年我经历了很多地方。这本书一部分是我在非洲时编写的，那时没有电也没有网络；还有一部分是在日本古朴幽静的寺院中和凝霞漫烂的樱花树下完成的；还有一些内容是在遥远美丽的柬埔寨小岛上完成的。我非常享受这段时光，希望我的这种美妙的体验能通过我的文字传达给每一位读者。</p>

<p>这里我要特别感谢一些人，感谢Stuart Eccles，Tim Malbon，Ben Griffins，和Sean O'Halpin，是他们给了我这个机会，让我重新找寻到埋藏在心底的激情。同样要感谢Jams Adam，Paul Battley，和Jonah Fox，他们是我值得尊敬的导师，谆谆之言让我获益良多。</p>

<p>同样要感谢出版社的编辑们，他们严格的审校保证了本书的质量：Henrik Joreteg，Justin Meyer，Lea Verou，Addy Osmani，Alex Barbara，max Williams，和Julio Cesar Ody。</p>

<p>当然最需要感谢的是我的父母，他们的默默支持是我坚实的后盾。</p>

<hr />

<h2>本书结尾的作者简介和封面简介</h2>

<h3>作者简介</h3>

<p>Alex MacCaw 是一名Ruby/JavaScript 程序员，在开源社区中很有名望，是Spine框架的作者，同时活跃在纽约、旧金山和柏林的各大 Ruby/Rails 论坛。除了作为一名工程师，他还喜欢带着他的尼康D90和冲浪板环游世界。 </p>

<h3>封面简介</h3>

<p>本书封面的动物是长耳鸮（也叫长耳猫头鹰，或夜猫子）。</p>

<p>长耳鸮身材苗条修长、羽毛呈灰褐色，是一种林地猫头鹰。它的显著特点就是头上有一对高耸的耳朵。因为其耳朵很有特点，所以我们才给这种鸟起了一个外号叫“猫头鹰”。</p>

<p>长耳鸮生活于北美、欧洲、亚洲以及北非的开阔丛林、灌木林和森林之中。它们主要猎食小型啮齿动物，比如田鼠和老鼠，它们的耳朵非常灵敏，能够精准的定位猎物的位置，即使在黑夜中也能捕猎。它们往返于开阔地之间来寻找猎物。它们的飞行技巧高超，飞行时非常轻盈且平稳，很多人经常将它和巨型飞蛾相比较。</p>

<p>长耳鸮不会自己筑巢。相反，它们会使用被喜鹊、乌鸦、鹰以及松鼠遗弃的巢穴。在猎食季节，它们彼此分散且有各自的领地（通常是在四月中到六月），而在寒冷的冬季，它们则会聚集在一起，彼此依靠以相互取暖，通常是7-50只长耳鸮在一起栖息。</p>

<hr />

<h2>封底文字</h2>

<p>JavaScript富应用程序开发是大势所趋，我们要将桌面程序的用户体验带入Web应用程序中，我们需要将服务器端的复杂度移植到客户端，这是一项艰巨的任务。本书将会教给你如何构建优雅又不失高水准的应用程序，包括架构、模板、框架、和服务器端的通信以及很多其他的方面。</p>

<p>本书中有着大量的实例代码，这些实例代码能帮助你更好的理解本书中提到的很多概念。学会如何构建JavaScript应用也会提升你的编码质量，提高你的产品的用户体验。</p>

<ul>
<li>使用模型-视图-控制器（MVC）模式，学习如何管理应用程序中的模块依赖</li>
<li>介绍模板系统和数据绑定</li>
<li>学习如何加载远程数据、Ajax以及夸域请求</li>
<li>使用WebSockets和Node.js创建实时应用</li>
<li>使用拖拽文件的方式来实现文件上传进度条</li>
<li>学习使用主流的框架和库，包括jQuery,Spine和Backbone</li>
<li>书写测试代码，并使用控制台来调试你的程序</li>
<li>学习部署应用的最佳实践，比如缓存控制和代码压缩</li>
</ul>

<p>Alex MacCaw 是一名Ruby/JavaScript 程序员，在开源社区中很有名望，是Spine框架的作者，同时活跃在纽约、旧金山和柏林的各大 Ruby/Rails 论坛。除了作为一名工程师，他还喜欢带着他的尼康D90和冲浪板环游世界。 </p>

<p>“强烈向读者推荐此书，JavaScritp Web Applications将会教给你如何构建先进的富应用程序，书中给出了很多优秀的工具和最佳实践都是很多程序员和工程师在工作中亟需的。我已经记不起向多少人推荐这本书了。“</p>

<p>-- Addy Osmani，美国在线JavaScript工程师</p>

</div>
</body>
</html>
